<template>
  <div class="layout">
    <h2 class="function-header">常见问题</h2>
    <div class="question-container">
      <div class="left-question">
        <div 
          v-for="(category, key) in questionList" 
          :key="key"
          class="category-item"
          :class="{ active: activeCategory === key }"
          @click="changeCategory(key)"
        >
          <div class="left-tit">{{ getCategoryQuestion(key).question }} </div>
        </div>
      </div>
      
      <div class="right-answer">
        <div v-if="activeCategory" class="answer-list">
          <div 
            v-for="item in getCurrentAnswers()" 
            :key="item.id"
            class="answer-item"
          >
            <div class="top-info">
              <h3 class="item-question">{{ item.question }}</h3>
            </div>
            <p v-if="item.answer">{{ item.answer }}</p>
            <p v-else class="no-answer">暂无答案</p>
          </div>
        </div>
        <div v-else class="no-category-selected">
          请从左侧选择一个分类
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import  { ref, onMounted } from 'vue'
import { getQAByUserQA } from '@/api/question'

const questionList = ref([])
const getQuestion = async () => {
  const res = await getQAByUserQA();
  if(res.code === 20000){
    questionList.value = res.data
  }
}
const activeCategory = ref(null);

// 获取分类标题（找到category为true的项）
const getCategoryQuestion = (key) => {
  const category = questionList.value[key].find(item => item.category);
  return category ? category : '未命名分类';
};

// 获取当前分类下的答案（排除category为true的项）
const getCurrentAnswers = () => {
  if (!activeCategory.value) return [];
  return questionList.value[activeCategory.value].filter(item => !item.category);
};

// 切换分类
const changeCategory = (key) => {
  activeCategory.value = key;
};

onMounted(() => {
  getQuestion().then(() => {
    // 获取第一个分类的key
    const keys = Object.keys(questionList.value);
    if (keys.length > 0) {
      activeCategory.value = keys[0];
    }
  });
});
</script>

<style scoped lang="scss">
.function-header{
  margin-top: px2rem(40);
  font-weight: normal;
  font-size: px2rem(24);
}
.question-container{
  display: flex;
  margin-top: px2rem(40);
  .left-question {
    width: 300px;
    border-right: 1px solid #eee;
    overflow-y: auto;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
    border: 1px solid $borderColor;
    border-radius: 5px;
   
  }

  .right-answer {
    flex: 1;
    padding: 20px;
    margin-left: 10px;
    overflow-y: auto;
    border: 1px solid $borderColor;

  }

  .category-item {
    padding: 12px 16px;
    margin-bottom: 8px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s;
    position: relative;
    display: flex;
    .left-tit{
      flex: 1;
    }
    .right-option{
      display: flex;
      align-items: center;
      i{
        margin: 0 5px;
        font-size: 18px;
        color: #666;
      }
      .show-icon{
        color: $mainColor;
      }
      .del-icon{
        color: #f56c6c;
      }
    }
   
  }

  .category-item:hover {
    background-color: #f5f5f5;
  }

  .category-item.active {
    background-color: #f5f5f5;
  }

  .answer-item {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px dashed #eee;
    position: relative;
    .top-info{
      display: flex;
      margin-bottom: 12px;
      .item-question{
        flex: 1;
        color: $black_2;
      }
      .right-option{
        display: flex;
        align-items: center;
        i{
          margin: 0 5px;
          font-size: 18px;
          color: #666;
        }
        .show-icon{
          color: $mainColor;
        }
        .del-icon{
          color: #f56c6c;
        }
      }
    }
  
    p {
      color: #666;
      line-height: 1.6;
    }
    
  }

  .no-answer {
    color: #999;
    font-style: italic;
  }

  .no-category-selected {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #999;
  }
}

</style>